<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="#/home">首页</a>
        <a href="#/server">服务</a>
        <a href="#/mine">个人中心</a>
    </div>
    <div class="content">

    </div>
    
</body>
<script>
    /*单页面应用
    1、单页面路由：（1）整个页面只是用一个HTML文档实现
                  （2）随着url的变化，动态更新网页
    2、前端路由：前端路由主要关注的是url地址的变化和对应资源的关系
                一般由前端程序员维护
    3、主要关注是url地址的变化和后端数据的关系
                一般由后端程序员维护*/


    //hash路由
    //监听url地址的改变
    //思路：用hashchange事件监听url地址中hash的值的变化，只要hash值发生变化
    /*hashchange的回调函数就会执行，在回调函数内部获取最新的hash值（location.hash)
    使用swith或if判断，根据不同的hash值调用不同的函数，完成内容的渲染*/
    window.onhashchange=function(){
        // console.log(location.hash);
        switch(location.hash){
            case '#/home':home_page();break
            case '#/server':server_page();break
            case '#/mine':mine_page();break

        }
    }
    //渲染首页内容
    function home_page(){
        document.querySelector('.content').innerHTML='首页的内容'
    }
    //渲染服务内容
    function server_page(){
        document.querySelector('.content').innerHTML='服务的内容'
    }
    //渲染个人中心
    function mine_page(){
        document.querySelector('.content').innerHTML='个人中心的内容'
    }
</script>
</html>